import React, { Component } from 'react';
import { Button, Row, Col, } from 'antd';
import { Link } from 'react-router';
import './Eip.less';

export default class Eip extends Component {
  onChange(index) {
    // console.log(index);
  }

  render() {
    return (
      <div className="block-eip">
        <Row className="row-slogan">
          <Col span={24}>
            <img src={ require('./../img/banner/2.png') } alt="banner" />
            <article>
              <h3>公网 EIP</h3>
              <span>独立的公网IP资源，可以绑定到阿里云专有网络VPC类型的ECS上，并可以动态解绑，再绑定到其它 ECS上，<br/>实现公网IP和ECS的解耦，满足灵活管理的要求。</span>
              <p>
                <Button size="large" type="primary">立即购买</Button>
                <Button size="large" ghost>管理控制台</Button>
                <Link to='/price/eip'><Button size="large" ghost>定价预览</Button></Link>
              </p>
            </article>
          </Col>
        </Row>

        <div className="wrap-goodness">
          <Row>
            <Col span={6}>
              <i className="icon icon-goodness1"></i>
              <h6>易用性</h6>
              <p>简单易用，便于管理<br/>深度集成数据处理服务</p>
            </Col>
            <Col span={6}>
              <i className="icon icon-goodness2"></i>
              <h6>高可靠</h6>
              <p>多重冗余备份<br/>服务设计可用性不低于99.99%</p>
            </Col>
            <Col span={6}>
              <i className="icon icon-goodness3"></i>
              <h6>强安全</h6>
              <p>多层次安全防护<br/>支持跨区域复制、异地容灾机制</p>
            </Col>
            <Col span={6}>
              <i className="icon icon-goodness4"></i>
              <h6>低成本</h6>
              <p>总体TCO更低<br/>生命周期管理进一步降低成本</p>
            </Col>
          </Row>
        </div>

        <div className="wrap-feature">
          <Row className="row-title">
            <Col span={24}>
              <h5>产品功能</h5>
            </Col>
          </Row>
          <Row className="row-feature">
            <Col span={24}>
              <i className="icon icon-feature1"></i>
              <p><strong>方便、灵活的使用方式，让您像操作本地文件一样</strong>访问灵活<br/>提供标准的RESTful API接口，丰富的SDK包，客户端工具、控制台，您可以像使用文件一样，方便上传/下载、检索、管理用于Web网站或者移动应用海量的数据。<br/><br/>支持数据生命周期管理<br/>您可以设置存储对象的生命周期，按指定的时间计划系统会自动执行批量删除或存储类型的转换的任务。</p>
            </Col>
          </Row>
          <Row className="row-feature">
            <Col span={24}>
              <i className="icon icon-feature2"></i>
              <p><strong>流式写入和读取，支持边读边写</strong>适用视频监控存储、提供类文件读写接口<br/>使摄像机的视频码流能像“流”一样往对象（文件）后面追加新内容，且已上传的内容即使在该对象（文件）未写完时都可以被访问，真正实现文件流式存储，视频录像秒级回放。<br/><br/>提供设备端直连OSS的C语言SDK开发包和Demo<br/>加快您的开发速度，节省开发成本</p>
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}